<template>
    <div style="flex: 1;">

        <host :index="index" :items="items" @firstviewadd="firstviewadd" style="position: absolute;left: 0;top: 0;right: 0;bottom: 100;">

        </host>
        <div style="height: 110;width: 750;position: absolute;bottom: 0;left: 0;right: 0;flex-direction: row;background-color: #1c1b1b">

            <tabitem @change="change" :index="0" :currentIndex="index"   class="tabitem" text="推荐" img="root:img/tab1_unselect.png"
                     selectImg="root:img/tab1_select.png" color="#666666" selectColor="#1296db">

            </tabitem>
            <tabitem @change="change" :index="1"  :currentIndex="index"  class="tabitem" text="电视剧" img="root:img/tab2_unselect.png"
                     selectImg="root:img/tab2_select.png" color="#666666" selectColor="#1296db">

            </tabitem>
            <tabitem @change="change" :index="2"  :currentIndex="index"   class="tabitem" text="电影" img="root:img/tab3_unselect.png"
                     selectImg="root:img/tab3_select.png" color="#666666" selectColor="#1296db">

            </tabitem>
            <tabitem @change="change" :index="3"  :currentIndex="index"   class="tabitem" text="收藏" img="root:img/tab4_unselect.png"
                     selectImg="root:img/tab4_select.png" color="#666666" selectColor="#1296db">

            </tabitem>

        </div>

        <!--<prerender src="app/busi/tab/serial.js"></prerender>-->
        <!--<a href="demo/pagedemo.js" style="width: 100;height: 100;background-color: red;justify-content: center;align-items: center"><text>跳转</text></a>-->
    </div>
</template>

<style>

    .title {
        padding-top: 40px;
        padding-bottom: 40px;
        font-size: 48px;
    }

    .logo {
        width: 360px;
        height: 156px;
    }

    .desc {
        padding-top: 20px;
        color: #888;
        font-size: 24px;
    }

    .tabitem {
        flex: 1;
    }
</style>

<script>
    var tabitem = require('./component/tabitem.vue')
    export default {
        components: {tabitem},
        data: {
            logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
            viewadd: false,
            index: 0,
            items: ['root:busi/tab/mainpage.js', 'root:busi/tab/serial.js', 'root:busi/tab/movie.js', 'root:busi/tab/collection.js']
        },

        methods: {
            update: function (e) {
                this.target = 'Weex'
                console.log('target:', this.target)
            },
            change(i)
            {
                if(i==3)
                {
                    var st=weex.requireModule("static")
                    var usr=st.get('user');
                    if(usr==undefined||usr=='')
                    {
                        var nav=weex.requireModule("navigator")
                        nav.present('account/login.js')
                        return;
                    }
                }
                this.index = i;
            },
            firstviewadd()
            {
                this.viewadd=true;
            },
            show()
            {
                var modal = weex.requireModule("modal")
                var p = weex.config.env.osVersion
//              p=p.replace('.', "")
//          p=p.replace(/./g,"");
                p = p.replace(/\./g, '')
                modal.alert({message: p})
            }
        }
        ,


        created: function () {


            var notify=weex.requireModule("notify")
            notify.regist('tabselect',(e)=>{

                this.index=e.index;

            })

            var globalEvent = weex.requireModule('globalEvent');
            var self = this;
            globalEvent.addEventListener("onPageInit", function (e) {

              var page=weex.requireModule("pagemodule")
                page.doubleBack();

              var navbar=weex.requireModule("navbar")
                navbar.setStatusBarStyle('white')
                var nav=weex.requireModule("navigator")
                nav.addBackGestureSelfControl()
            });

            globalEvent.addEventListener("viewWillAppear", function (e) {

                const nav = weex.requireModule('navbar');

                nav.setStatusBarStyle('white');
//              nav.setBackgroundColor("#ffffff");
//              nav.makeTransparent();
            });

        },
    }
</script>